{% macro warnings_and_loader() -%}
  <div class="oppia-main-content-container" ng-cloak>
    <div class="oppia-alert-blocks">
      <div ng-repeat="warning in (warningsData.warnings | limitTo:5) track by $index">
        <p class="alert alert-warning">
          <button type="button" class="close" ng-click="warningsData.deleteWarning($index)">&times;</button>
          <strong>Warning!</strong>
          <[warning]>
        </p>
      </div>
    </div>

    <div ng-show="loadingMessage" class="oppia-loading-fullpage">
      <div class="oppia-align-center">
        <[loadingMessage]>
        <span class="oppia-loading-dot-one">.</span>
        <span class="oppia-loading-dot-two">.</span>
        <span class="oppia-loading-dot-three">.</span>
      </div>
    </div>
    <div ng-show="!loadingMessage">
      {% block content %}{% endblock %}
    </div>
  </div>
{%- endmacro %}

<!DOCTYPE html>
<html ng-app="oppia" ng-controller="Base">
  <head>
    <noscript>
      <meta http-equiv="refresh" content="1;url=/static/pages/noscript.txt">
    </noscript>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <meta name="msapplication-config" content="none">
    <link rel="apple-touch-icon" href="/images/logo.png">
    <title>Oppia - {% block subtitle %}{% endblock %}</title>

    {% block header_css %}
      {% include 'header_css_libs.html' %}
    {% endblock header_css %}

    <script>
      var GLOBALS = {
        ADDITIONAL_ANGULAR_MODULES: [],
        csrf_token: JSON.parse('{{csrf_token|js_string}}'),
        DEV_MODE: JSON.parse('{{DEV_MODE|js_string}}'),
        NAV_MODE:
          {% if nav_mode %}
            JSON.parse('{{nav_mode|js_string}}'),
          {% else %}
            null,
          {% endif %}
        INVALID_NAME_CHARS: JSON.parse('{{INVALID_NAME_CHARS|js_string}}'),
        EXPLORATION_STATUS_PRIVATE: JSON.parse(
          '{{EXPLORATION_STATUS_PRIVATE|js_string}}'),
        EXPLORATION_STATUS_PUBLIC: JSON.parse(
          '{{EXPLORATION_STATUS_PUBLIC|js_string}}'),
        EXPLORATION_STATUS_PUBLICIZED: JSON.parse(
          '{{EXPLORATION_STATUS_PUBLICIZED|js_string}}'),
        ALL_LANGUAGE_CODES: JSON.parse(
          '{{ALL_LANGUAGE_CODES|js_string}}'),
        DEFAULT_LANGUAGE_CODE: JSON.parse(
          '{{DEFAULT_LANGUAGE_CODE|js_string}}')
      };

      {% if additional_angular_modules %}
        GLOBALS.ADDITIONAL_ANGULAR_MODULES = JSON.parse('{{additional_angular_modules|js_string}}');
      {% endif %}
    </script>

    {% block header_js %}
      {% include 'header_js_libs.html' %}
    {% endblock header_js %}

    {{BEFORE_END_HEAD_TAG_HOOK}}
  </head>

  <body>
    {% if iframed %}
      {{ warnings_and_loader() }}
    {% else %}
      <div id="wrapper" class="ng-cloak">
        <div class="oppia-main-body">
          <!-- nav bar -->
          <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-container">
              <div class="container">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>

                {% block navbar %}
                  <div class="navbar-header">
                    <a class="navbar-brand" href="/">
                      <img src="/images/logo.png" class="oppia-logo">
                      Oppia&nbsp;<sup>beta</sup>
                    </a>
                  </div>

                  <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                      <li {% if nav_mode == 'gallery' %}class="active"{% endif %}>
                        <a href="/gallery">Gallery</a>
                      </li>
                      {% if SHOW_FORUM_PAGE %}
                        <li {% if nav_mode == 'forum' %}class="active"{% endif %}>
                          <a href="/forum">Forum</a>
                        </li>
                      {% endif %}
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                          About
                          <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                          {% for page in ABOUT_PAGES %}
                            <li>
                              <a href="{{page['url']}}">{{page['name']}}</a>
                            </li>
                          {% endfor %}
                        </ul>
                      </li>
                      {% block navbar_additions %}
                      {% endblock %}
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                      {% if user_email %}
                        {% if username %}
                          <li class="dropdown">
                            <a href="/">
                              Dashboard
                              <span ng-if="numUnseenNotifications > 0">
                                (<[numUnseenNotifications]>)
                              </span>
                            </a>
                          </li>
                        {% endif %}

                        <li class="dropdown">
                          <a class="dropdown-toggle" data-toggle="dropdown">
                            {% if username %}
                              {{username}}
                            {% else %}
                              {{user_email}}
                            {% endif %}

                            {% if is_admin %}
                              (Admin)
                            {% elif is_moderator %}
                              (Moderator)
                            {% endif %}
                            <span class="caret"></span>
                          </a>
                          <ul class="dropdown-menu" role="menu">
                            <li>
                              <a href="{{logout_url}}">Logout</a>
                            </li>

                            {% if is_moderator %}
                              <li>
                                <a href="/moderator" target="_blank">
                                  Moderator Page
                                </a>
                              </li>
                            {% endif %}

                            {% if is_super_admin %}
                              <li>
                                <a href="/admin" target="_blank">
                                  Admin Page
                                </a>
                              </li>
                            {% endif %}
                          </ul>
                        </li>
                      {% else %}
                        <li>
                          <a href="{{login_url}}">Login</a>
                        </li>
                      {% endif %}
                    </ul>
                  </div>
                {% endblock navbar %}

              </div>
            </div>
          </nav>
          {{ warnings_and_loader() }}
        </div>

        <div class="oppia-footer" role="contentinfo">
          <div class="container">
            <ul class="oppia-footer-nav col-lg-8 col-md-8 col-sm-8">
              <li>
                <a href="/">Home</a>
              </li>
              <li>
                <a href="/gallery">Gallery</a>
              </li>
              {% for page in ABOUT_PAGES %}
                <li>
                  <a href="{{page['url']}}">{{page['name']}}</a>
                </li>
              {% endfor %}
            </ul>
            {% if nav_mode in ['explore', 'create'] %}
              <span class="col-lg-4 col-md-4 col-sm-4" style="margin-top: 10px;">
                <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
                  <img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" />
                </a>
                <span style="font-size: 0.8em">
                  <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">This exploration</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="{{FULL_SITE_URL}}/static/pages/attribution.txt" property="cc:attributionName" rel="cc:attributionURL">[no attribution required]</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="{{FULL_SITE_URL}}" rel="dct:source">{{FULL_SITE_URL}}</a>.
                </span>
              </span>
            {% endif %}
            </ul>
          </div>
        </div>
      </div>
    {% endif %}

    {% include 'forms/form_builder_templates.html' %}
    {% include 'footer_js_libs.html' %}

    <script>
      {{ include_js_file('app.js') }}
      {{ include_js_file('directives.js') }}
      {{ include_js_file('filters.js') }}
      {{ include_js_file('forms/formBuilder.js') }}
      {{ include_js_file('services/activeInputData.js') }}
      {{ include_js_file('services/warningsData.js') }}
      {{ include_js_file('services/messengerService.js') }}
      {{ include_js_file('components/autocomplete.js') }}
      {{ include_js_file('components/visualizations.js') }}
      {{ include_js_file('base.js') }}
      {{ include_js_file('/expressions/evaluator.js') }}
      {{ include_js_file('/expressions/parser.js') }}
    </script>


    {% block footer_js %}
    {% endblock footer_js %}

  </body>
</html>
